<template>
	<view>
		<uv-popup :show="modelValue" @close="onClose" mode="center" :round="10">
			<view class="container">
				<view style="display: flex;justify-content: center;">
					<uv-icon name="checkmark-circle-fill" size="60" color="#05A776" />
				</view>
				<view class="text">订阅成功，稍后将返回最新状态</view>
				<view class="detail">
					<view class="blno">{{ $props.shipping }} B/L {{ $props.billNo }}</view>
					<view class="detail-text">订阅最新的物流跟踪状态</view>
					<view class="detail-text">
						预计
						<text class="blno">三分钟</text>
						内获得
					</view>
				</view>
				<view class="btns">
					<uv-button type="primary" custom-style="border-radius: 4px" @click="onClose">
						知道了
					</uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
export default {
	props: {
		modelValue: {
			type: Boolean,
			default: false
		},
		shipping: {
			type: String,
			default: ''
		},
		billNo: {
			type: String,
			default: ''
		}
	},
	data() {
		return {

		}
	},
	methods: {
		onClose() {
			this.$emit('update:modelValue', false)
			this.$emit('update:shipping', '')
			this.$emit('update:billNo', '')
		}
	}
}
</script>

<style scoped>
.container {
	width: calc(100vw - 40px);
	padding: 40px 0;
	text-align: center;
}

.text {
	font-size: 16px;
	color: #0BA471;
	font-weight: 500;
	margin-top: 16px;
}

.detail {
	margin-top: 16px;
}

.blno {
	font-size: 12px;
	color: #3A75F5;
}

.detail-text {
	font-size: 12px;
	color: #606266;
}

.btns {
	padding: 0 85px;
	margin-top: 40px;
}
</style>